<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
    <link rel="stylesheet" href="/static/css/element.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/common/vue.js"></script>
    <script src="/static/js/common/axios.js"></script>
    <script src="/static/js/common/element.js"></script>
    <script src="/static/js/common/qs.js"></script>
    <script src="/static/js/common/request.js"></script>
    <script src="/static/js/common/jquery.js"></script>
</head>
<body>
<div id="app" v-cloak>


    <el-container>
        <el-header>
            <template v-for="item in apiLink">
                <el-button type="text" @click="openLinkClick(item.link)">接口[[item.id]]</el-button>
            </template>
        </el-header>
        <el-container class="main_container">
            <el-aside width="200px">
                <div class="friends_link">
                    <h3>友情链接</h3>
                    <template v-for="(item,index) in friendsLink">
                        <template v-if="index%3 ==0">
                            <a :href="item.link" target="_blank">
                                <el-tag type="warning">[[item.name]]</el-tag>
                            </a>
                        </template>
                        <template v-else-if="index%4 ==0">
                            <a :href="item.link" target="_blank">
                                <el-tag type="success">[[item.name]]</el-tag>
                            </a>
                        </template>
                        <template v-else-if="index%5 ==0">
                            <a :href="item.link" target="_blank">
                                <el-tag type="primary">[[item.name]]</el-tag>
                            </a>
                        </template>
                        <template v-else-if="index%7 ==0">
                            <a :href="item.link" target="_blank">
                                <el-tag type="danger">[[item.name]]</el-tag>
                            </a>
                        </template>
                        <template v-else>
                            <a :href="item.link" target="_blank">
                                <el-tag type="info">[[item.name]]</el-tag>
                            </a>
                        </template>
                    </template>
                </div>

            </el-aside>
            <el-container>
                <el-main>
                    <el-link type="success">将主流网站，如腾讯、爱奇艺、优酷等网站上的播放视频页的 url 链接复制在下方，然后选择接口，点击播放即可</el-link>
                    <el-form :inline="true" :model="formCopyLink">
                        <el-form-item>
                            <el-input v-model="formCopyLink.copyLink" placeholder="请输入内容"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select style="width: 120px;" v-model="formCopyLink.apiLink" placeholder="请选择">
                                <el-option
                                        v-for="item in apiLink"
                                        :key="item.id"
                                        :label="'接口'+item.id"
                                        :value="item.link"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="openCopyLinkPlayClick">播放</el-button>
                        </el-form-item>
                    </el-form>
                    <el-link type="success">目前只支持爱奇艺，腾讯视频简单搜索，然后选择视频类型，点击搜索即可，后续功能完善中...</el-link>
                    <el-form :inline="true" :model="formTv">
                        <el-form-item>
                            <el-input v-model="formTv.name" placeholder="请输入内容"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select style="width: 120px;" v-model="formTv.type" placeholder="请选择">
                                <el-option label="电视剧" value="1"></el-option>
                                <el-option label="电影" value="2"></el-option>
                                <el-option label="综艺" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="requestGetTvPlay">搜索</el-button>
                        </el-form-item>
                    </el-form>


                    <tv-movie
                            :tvMovie="aiqiyiData"
                            @select-link="selectLinkClick"
                    ></tv-movie>

                    <tv-movie
                            :tvMovie="tencentData"
                            @select-link="selectLinkClick"
                    ></tv-movie>

                </el-main>
                <el-footer></el-footer>
            </el-container>
        </el-container>
    </el-container>


</div>
</body>
<script>


    Vue.component('tv-movie', {
        delimiters: ["[[", "]]"],
        props: ['tvmovie'],
        data: function () {
            return {}
        },
        methods: {
            selectLinkChange(link) {
                this.$emit('select-link', link)
            }
        },
        template: `
            <div class="tv_movie">
                <template v-if="tvmovie">
                    <h3 class="tv_movie_source">[[tvmovie.source]]</h3>
                    <div class="tv_movie_content">
                        <div class="tv_movie_content_left">
                            <el-image :src="tvmovie.pic"></el-image>
                        </div>
                        <div class="tv_movie_content_right">
                            <div>
                                <p>[[tvmovie.name]]</p>
                            </div>
                            <div>
                                <p>导演：[[tvmovie.director]]</p>
                                <p>演员：[[tvmovie.actor]]</p>
                            </div>
                            <div>
                                <p>简介：[[tvmovie.desc]]</p>
                            </div>
                            <div>
                                <template v-for="item in tvmovie.list">
                                    <el-button size="mini" @click="selectLinkChange(item.link)">[[item.title]]
                                    </el-button>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

        `
    })

    let app = new Vue({
        delimiters: ["[[", "]]"],
        el: "#app",
        data: {
            formCopyLink: {
                copyLink:"",
                apiLink:"",
            },
            formTv: {
                name: "",
                type: "1",
            },
            apiLink: [],
            friendsLink: [],
            aiqiyiData: null,
            tencentData: null,
            selectLink: null,
        },
        mounted() {
            this.requestGetMockApiLink();
            this.requestGetMockFriendsLink();
        },
        methods: {
            requestGetTvPlay() {
                if (!this.formTv.name) return this.$message.warning("请输入要播放的内容");
                let data = {...this.formTv};
                requestFunc(null, '/api/tvplay', data, (data) => {
                    if(!data.aiqiyi) this.$message.warning("爱奇艺没搜到数据");
                    if(!data.tencent) this.$message.warning("腾讯没搜到数据");
                    this.aiqiyiData = data.aiqiyi;
                    this.tencentData = data.tencent;
                })
            },
            requestGetMockApiLink() {
                requestFunc('get', '/static/mock/apiLink.json', null, (data) => {
                    this.apiLink = data;
                })
            },
            requestGetMockFriendsLink() {
                requestFunc('get', '/static/mock/friendsLink.json', null, (data) => {
                    this.friendsLink = data;
                })
            },
            selectLinkClick(link) {
                this.selectLink = link;
            },
            openLinkClick(link) {
                if (!this.selectLink) return this.$message.warning("请选择要播放的剧集");
                window.open(link + this.selectLink, '_blank');
            },
            openCopyLinkPlayClick(){
                if (!this.formCopyLink.copyLink) return this.$message.warning("请输入要播放 url 链接");
                if (!this.formCopyLink.apiLink) return this.$message.warning("请选择要播放的接口");
                window.open(this.formCopyLink.apiLink + this.selectLink, '_blank');
            }

        },
    });

</script>
</html>